<template>
  <div>
      <div class="scroll-list-wrap" :style="{height:getWindowHeight+'px'}">
          <cube-scroll
            ref="scrolls"
            :data="StreamLog"
            :options="options"
            @pulling-up="onPullingUp">
                  <div class="jifen_bg" :style="jifen_bg">
                      <div>
                          <p>您已支付</p>
                          <p class="price"><em>&yen;</em>{{user_price}}</p>
                          <!-- <p>已为您节省：&yen;99.00</p> -->
                      </div>
                  </div>
                  <div class="nav_date">
                      <a href="javascript:;">本月账单明细共{{order_num}}笔</a>
                      <a href="javascript:;" @click="showDateTimePicker">
                           <span v-if="!time">当月账单</span>
                           <span v-else>{{time}}</span>
                           <i :style="down_icon"></i>
                       </a>
                  </div>
                  <div class="wrapper">
                      <div class="listfl border-bottom-1px" v-for="item in StreamLog">
                          <div class="list_wp">
                              <div class="touxiang">
                                  <img :src="item.logo" alt="">
                              </div>
                              <div class="content_right">
                                  <div class="top">
                                      <p class="user_name">{{item.store_name}}</p>
                                      <p class="jifen"><em></em> {{item.payment_price}}</p>
                                  </div>
                                  <!-- <p class="info">流水收入</p> -->
                                  <p class="date_p">{{item.created_at*1000 | formatDate}}</p>
                              </div>
                          </div>
                      </div>
                      <p v-if="StreamLog.length == 0" style="margin-top:1rem">没有更多数据了</p>
                  </div>
          </cube-scroll>
      </div>
  </div>
</template>
<script>
import {formatDate} from '@/util/date.js';
export default {
    data(){
        return{
            jifen_bg:{
                backgroundImage: "url(" + require("../../assets/streamlog@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            down_icon:{
                backgroundImage: "url(" + require("../../assets/down_icon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            page:1,
            time:"",//请求的时间
            StreamLog:[],
            order_num:"",//月订单数
            user_price:"",//总消费金额
            pullUpLoad: true,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: '上拉加载更多',
            pullUpLoadNoMoreTxt: '没有更多数据喔~'
        }
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    methods:{
        changecomponent:function(com){
            this.comaction = com;
        },
       showDateTimePicker() {
         if (!this.dateTimePicker) {
           this.dateTimePicker = this.$createDatePicker({
             title: '请选择时间',
             min: new Date(2008, 7),
             max: new Date(2020, 9),
             value: new Date(),
             columnCount: 2,
             onSelect: this.selectHandle,
             onCancel: this.cancelHandle
           })
         }

         this.dateTimePicker.show()
       },
       selectHandle(date, selectedVal, selectedText) {
           this.time = selectedVal.join('-');
           this.StreamLog = [];
           this.page = 1;
           this.getStreamLog();
       },
       //消费账单
       getStreamLog(){
           let that = this;
           const toast = that.$createToast({
               time: 1000,
               txt: ''
             })
             toast.show()
           let url = "/fang/personal/stream_log";
           that.$axios.post(url,that.$qs.stringify({
               access_token:that.$store.state._token01,
               page:that.page,
               time:that.time
           }))
           .then(function(response){
               toast.hide();
               let res = response.data;
               console.log(response)
               if(res.status == 1){
                   that.order_num = res.data.order_num;
                   that.user_price = res.data.user_price;
                   if(res.data.data.length > 0){
                       that.page += 1;
                       that.StreamLog = that.StreamLog.concat(res.data.data);

                   }else{
                       // 如果没有新数据
                       that.$refs.scrolls.forceUpdate();
                   }
               }else if (res.status == -1) {
                   that.noLogin();
               }else{
                   that.toast = that.$createToast({
                     txt: res.msg,
                     type: 'txt'
                   })
                   that.toast.show()
               }
           })
           .catch(function(error){
               console.log(error);
               that.toast = that.$createToast({
                 txt: error.toString(),
                 type: 'txt'
               })
               that.toast.show()
           });
       },
       onPullingUp() {
           this.getStreamLog();
         // 更新数据
       },
   },
   metaInfo: {
     title: "消费账单"
    },
   mounted(){
       this.getStreamLog();
   },
   computed: {
      options() {
        return {
            pullUpLoad: this.pullUpLoadObj,
            scrollbar: false
        }
      },
       getWindowHeight(){
         return document.documentElement.clientHeight || document.body.clientHeight;
     },
     //上拉配置
     pullUpLoadObj: function() {
         return this.pullUpLoad ? {
           threshold: parseInt(this.pullUpLoadThreshold),
           txt: {
             more: this.pullUpLoadMoreTxt,
             noMore: this.pullUpLoadNoMoreTxt
           }
         } : false
       }
   }
}
</script>
<style scoped>
.jifen_bg{
    height: 6.72rem;
    display: flex;
    align-items: center;
    padding-left: 1.2rem;
}
.jifen_bg p{
    font-size: .52rem;
    color: #FFFFFF;
    margin-top: .2rem;
    text-align: left;
    margin-bottom: .2rem;
}
.jifen_bg .price{
    color: #FFFFFF;
    font-size: 1.28rem;
    margin: .2rem 0 .6rem 0;
}
.jifen_bg .price > em{
    font-size: .64rem;
    margin-right: .4rem;
}
.nav_date{
    padding:.56rem .64rem 0 .64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .4rem;
}
.nav_date > a{
    font-size: .52rem;
    color: #272727;
    position: relative;
    margin-right: .6rem;
}
.nav_date > a > i{
    content: "";
    display: block;
    width: .44rem;
    height: .28rem;
    position: absolute;
    right: -.6rem;
    top: 50%;
    transform: translate(0,-50%);
}
.wrapper{
    padding: 0 .64rem;
}
.wrapper .listfl{
    height:3.96rem;
    padding: .8rem .52rem .64rem .52rem;
    -moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
    box-sizing:border-box;
}
.wrapper .listfl .list_wp{
    height: 100%;
    display: flex;
}
.wrapper .listfl .touxiang{
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
}
.wrapper .listfl .touxiang img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.wrapper .listfl .content_right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: .56rem;
}
.wrapper .listfl .content_right .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.wrapper .listfl .content_right .top .user_name{
    font-size: .56rem;
    color: #363636;
    font-weight: 600;
}
.wrapper .listfl .content_right .top .jifen{
    font-size: .7rem;
    color: #272727;
    font-weight: bold;
}
.wrapper .listfl .content_right .top .jifen > em{
    font-size: .6rem;
}
.wrapper .listfl .content_right .info{
    font-size: .44rem;
    color: #333333;
    text-align: left;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.wrapper .listfl .content_right .date_p{
    font-size: .44rem;
    color: #999999;
    text-align: left;
}
</style>
